
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios的使用</title>
</head>
<body>
    
    <div class="box"></div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //axios:封装的插件 ：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
        // 从浏览器中创建 XMLHttpRequests
        // 从 node.js 创建 http 请求
        // 支持 Promise API
        // 拦截请求和响应
        // 转换请求数据和响应数据
        // 取消请求
        // 自动转换 JSON 数据
        // 客户端支持防御 XSRF  XSS()


        // https://unpkg.com/axios/dist/axios.min.js"
        // axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
        // 1:一种写法
    //    axios({
    //     method:"get",
    //     url:"https://hmajax.itheima.net/api/news",
    //    }).then(res=>{
    //     //  console.log(res);
    //      render(res.data.data)
    //    })

        // 2：
        axios.get("https://hmajax.itheima.net/api/news")
            .then(res=>{
                console.log(res.data.data);
                render(res.data.data)
            })

        
       
        // 　　5. 更新界面

        function render(data) {
            console.log(data);
            
            document.querySelector(".box").innerHTML = data[0].title
        }


    </script>
</body>
</html>